<template>
  <el-dialog
  title="题目预览"
  :visible.sync="showDilog"
  width="50%"
  :before-close="handleClose"
  @close="handleClose"
  @open='open'
  >
  <el-form status-icon  label-width="100px" class="demo-ruleForm">
  <el-form-item  >
   <div class="top">
     <span class="top_spa">【题型】：{{previewList.chkRemarks}}</span>
     <span class="top_spa">【编号】：{{previewList.id}}</span>
     <span class="top_spa">【难度】：{{previewList.difficulty}}</span>
     <span class="top_spa">【标签】：{{previewList.direction}}</span>
   </div>

    <div class="bottom">
     <span class="bottom_spa">【学科】：{{previewList.subjectName}}</span>
     <span class="bottom_spa">【目录】：{{previewList.directoryName}}</span>
     <span class="bottom_spa">【方向】：{{previewList.direction}}</span>
   </div>
  <el-divider></el-divider>
  <span>【题干】:</span><br/>
  <p v-html="previewList.question" class="subject"></p>
  <!-- 点选 -->
  <div v-if="this.checkState === '1'">
    <span>选项：（以下选中的选项为正确答案）</span>
    <div  v-for="(arr,index) in previewList.options"  :key="index" >
      <el-radio

        v-model="myradio"
        :label="index"
        ref="myradio"
      >{{arr.title}}
      </el-radio>
      <br>
    </div>
  </div>
  <!-- 多选 -->
  <div v-if="this.checkState === '2'">
    <span>选项：（以下选中的选项为正确答案）</span>
    <div  v-for="(arr,index) in previewList.options"  :key="index" >
      <el-checkbox-group v-model="checkList">
        <el-checkbox :label="index" ref="mycheck">{{arr.title}}</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
  <el-divider></el-divider>
  <div>
    <span>【参考答案解析】</span><el-button type="warning" @click="videoPlay">视频答案预览</el-button>
  </div>
  <video v-if="videoState" :src="previewList.videoURL" width="50%" controls autoplay></video>
   <el-divider></el-divider>
    【答案解析】: <span  v-html="previewList.answer"></span>

   <el-divider></el-divider>
   <span>【题目备注】:{{previewList.remarks}}</span>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">关闭</el-button>

  </el-form-item>
</el-form>
</el-dialog>
</template>

<script>
export default {
  name: 'ztlb',
  props: {
    showDilog: {
      type: Boolean,
      default: true
    },
    previewList: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      checkState: '', // 选框状态 1 单选1 2多选
      myradio: '', // 单选绑定
      checkList: [], // 多选
      videoState: false// 视频状态
    }
  },
  methods: {
    open () {
      const code = this.previewList.options.filter(item => {
        return String(item.isRight) === '1'
      })

      if (code.length === 1) {
        this.checkState = '1'
        this.selected()
      } else if (code.length > 1) {
        this.checkState = '2'
        this.check()
      }
    },
    // 单选多选状态
    async selected () {
      await this.$nextTick()
      this.previewList.options.forEach((item, index) => {
        this.$refs.myradio[index].$el.children[0].children[1].disabled = true
      })
      const rindex = this.previewList.options.findIndex((item, index) => {
        return String(item.isRight) === '1'
      })
      this.myradio = rindex
    },
    // 多选
    async check () {
      await this.$nextTick()
      this.previewList.options.forEach((item, index) => {
        this.$refs.mycheck[index].$el.children[0].children[1].disabled = true
        if (String(item.isRight) === '1') {
          this.checkList.push(index)
        }
      })
    },
    // 播放视频
    videoPlay () {
      this.videoState = true
    },
    handleClose () {
      this.$emit('handle-Close')
      console.log(this.previewList)
    },
    submitForm () {
      this.videoState = false
      this.showDilog = false
    }
  }
}
</script>

<style scoped >
.top_spa{
  margin-right: 40px;
}
.bottom_spa{
   margin-right: 40px;
}
.subject {
  color: blue;
}
</style>
